<template>
    <!-- logo和搜索框 -->
    <LogoAndSearch></LogoAndSearch>

    <!-- 顶部信息栏 -->
    <TopInfo></TopInfo>

    <!-- 导航菜单栏 -->
    <NavMenu></NavMenu>

    <!-- 侧边栏 -->
    <el-menu text-color="#000" style="width: 200px;position: relative;top:100px;left:50px" @open="handleOpen"
        @close="handleClose" router default-active="view">

        <!-- 订单中心 -->
        <el-menu-item index="orders">
            <template #title>
                <el-icon>
                    <TrendCharts />
                </el-icon>
                <span style="color: #409EFF;">订单中心</span>
            </template>
        </el-menu-item>

        <!-- 本人车票 -->
        <el-menu-item index="myticket">
            <template #title>
                <el-icon>
                    <List />
                </el-icon>
                <span>本人车票</span>
            </template>
        </el-menu-item>

        <!-- 会员中心 -->
        <el-menu-item>
            <template #title>
                <el-icon>
                    <UserFilled />
                </el-icon>
                <span>会员中心</span>
            </template>

        </el-menu-item>

        <!-- 个人信息 -->
        <el-sub-menu index="myinfo">
            <template #title>
                <el-icon>
                    <Promotion />
                </el-icon>
                <span>个人信息</span>
            </template>
            <el-menu-item index="view">查看个人信息</el-menu-item>
            <el-menu-item>账号安全</el-menu-item>
            <el-menu-item>手机核验</el-menu-item>

        </el-sub-menu>

        <!-- 常用信息管理 -->
        <el-sub-menu index="user">
            <template #title>
                <el-icon>
                    <Histogram />
                </el-icon>
                <span>常用信息管理</span>
            </template>
            <el-menu-item index="passenger">乘车人管理</el-menu-item>
            <el-menu-item>地址管理</el-menu-item>
        </el-sub-menu>

    </el-menu>

    <!-- 内容区域 -->
<div style="position: absolute;top:200px;left: 300px ;">
    <el-form :model="formData" label-width="400px">
        <el-form-item label="用户名" >


            <el-input v-model="formData.username" style="width: 300px;" disabled/>
        </el-form-item>



        <el-form-item label="证件类型：">

            <el-select v-model="formData.idtype" style="width: 300px;">
                <el-option label="中国居民身份证" value="1" />
                <el-option label="港澳台居民居住证" value="2" />
                <el-option label="港澳居民来往内地通行证" value="3" />
                <el-option label="台湾居民来往大陆通行证" value="4" />
                <el-option label="中国居民身份证" value="5" />
                <el-option label="护照" value="6" />
                <el-option label="外国人永久居留身份证" value="7" />

            </el-select>
        </el-form-item>

        <el-form-item label="姓名：">

            <el-input v-model="formData.name" style="width: 300px;" />
        </el-form-item>
        <el-form-item label="证件号码：">

            <el-input v-model="formData.id" style="width: 300px;"  />
        </el-form-item>
        <el-form-item label="优惠（待）类型：">

            <el-select v-model="formData.favortype" style="width: 300px;">
                <el-option label="成人" value="1" />
                <el-option label="儿童" value="2" />
                <el-option label="学生" value="3" />
                <el-option label="残疾军人" value="4" />
            </el-select>
       
        </el-form-item>

        <el-form-item label="邮箱：">
            <el-input v-model="formData.email" style="width: 300px;" />
        </el-form-item>
        <el-form-item label="手机号码：">

            <el-select style="width: 100px;" v-model="formData.mobiletype">
                <el-option label="+86 中国" value="1" />
                <el-option label="+852 中国香港" value="2" />
                <el-option label="+853 中国澳门" value="3" />
                <el-option label="+886 中国台湾" value="4" />
            </el-select>
            <el-input v-model="formData.mobile" style="width:200px;" />

        </el-form-item>

        <el-form-item label="账户余额">
            <el-input v-model="formData.amount" style="width: 300px;"/>
        </el-form-item>

        <el-form-item>
            <el-button type="primary">保存</el-button>
        </el-form-item>


    </el-form>
</div>
</template>
  
<script setup>

import NavMenu from '../../components/home/NavMenu.vue'
import TopInfo from '../../components/home/TopInfo.vue'
import LogoAndSearch from '../../components/home/LogoAndSearch.vue'

import { TrendCharts, List, UserFilled, Promotion, Histogram } from '@element-plus/icons-vue'

import { useMyinfoStore } from '../../stores/myinfo'

// 引入storeToRefs
import { storeToRefs } from 'pinia'

//实例化对象
const myinfoStore = useMyinfoStore()

const {formData} = storeToRefs(myinfoStore)


myinfoStore.queryMyInfo()

const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}



</script>

<style scoped>
.el-table .el-table__header th div {
    text-align: center;
}
</style>